<script lang="ts" setup name="XtxCity">
import { ref, watchEffect } from 'vue';
import {onClickOutside } from '@vueuse/core'
import axios from 'axios';
import {CityResult } from './data'
defineProps({
  adddress:{
    type:String,
    default:''
  }
})
// 控制城市选择隐藏显示
const active = ref(false)
const target = ref(null)
onClickOutside(target,()=>{
  // 只要点击target元素之外的会触发这个函数
  active.value=false
})
// 获取城市数据
type AreaType = {
  code: string,
	level: number,
	name: string,
	areaList: AreaType[]
}
const areaList =ref<AreaType[]>([])
const catchList =ref<AreaType[]>([])//数据备份
const getAreaList  = async()=>{
  const res =  await axios.get<AreaType[]>('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')
  areaList.value= res.data
  catchList.value= res.data
}
getAreaList()
// 点击选择省市区
// 选择的城市结果类型



const emit = defineEmits<{
  (e: 'changeCity', value: CityResult): void
}>()
// 选择城市
const changeResult = ref({
  provinceCode: '',
  provinceName: '',
  cityCode: '',
  cityName: '',
  countyCode: '',
  countyName: ''
})
const handleClick=(item:AreaType)=>{
  if (item.level === 0) {
    // 省
    changeResult.value.provinceName = item.name
    changeResult.value.provinceCode = item.code
  }
  if (item.level === 1) {
    // 市
    changeResult.value.cityName = item.name
    changeResult.value.cityCode = item.code
  }
  if (item.level === 2) {
    // 县（区）
    changeResult.value.countyName = item.name
    changeResult.value.countyCode = item.code
    // 关闭弹窗
    active.value = false
    // 提交父组件
    emit('changeCity', changeResult.value)
  }
areaList.value=item.areaList
}
// 侦听弹框关闭重新赋值
watchEffect(()=>{
  if(!active.value){
    areaList.value=catchList.value
  }
})
</script>
<template>
  <div class="xtx-city" ref="target">
    <div class="select"  @click="active=!active" :class="{active}">
      <span class="placeholder" v-if="!adddress">请选择配送地址</span>
      <span class="value" v-else>{{adddress}}</span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <div class="option" v-show="active">
      <span class="ellipsis" 
       v-for="item in areaList" 
       :key="item.code"
       @click="handleClick(item)"
       >{{item.name}}</span>
    </div>
  </div>
</template>

<style scoped lang="less">
.xtx-city {
  display: inline-block;
  position: relative;
  z-index: 400;
  .select {
    border: 1px solid #e4e4e4;
    height: 30px;
    padding: 0 5px;
    line-height: 28px;
    cursor: pointer;
    &.active {
      background: #fff;
    }
    .placeholder {
      color: #999;
    }
    .value {
      color: #666;
      font-size: 12px;
    }
    i {
      font-size: 12px;
      margin-left: 5px;
    }
  }
  .option {
    width: 542px;
    border: 1px solid #e4e4e4;
    position: absolute;
    left: 0;
    top: 29px;
    background: #fff;
    min-height: 30px;
    line-height: 30px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    > span {
      width: 130px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px;
      padding: 0 3px;
      &:hover {
        background: #f5f5f5;
      }
    }
  }
}
</style>